<template>
    <view class="card-group-cell">
        <image class="login-icon" v-if="showIcon" :src="label"></image>
        <input
            class="input"
            v-if="password || inputType == 'password'"
            :adjust-position="false"
            :type="'password'"
            :value="value"
            v-model="model"
            :placeholder="placeholder"
            placeholder-class="placeholderClass" />
        <input
            class="input"
            v-else
            :adjust-position="false"
            :type="inputType"
            :value="value"
            v-model="model"
            :placeholder="placeholder"
            placeholder-class="placeholderClass" />
        <btn-get-code class="btn-get-code" v-if="isShowBtn" :codeType="codeType"></btn-get-code>
    </view>
</template>

<script>
import btnGetCode from "@/components/common/btn-get-code.vue"
export default {
    props: {
        label: {
            type: String,
            default: "",
        },
        showIcon: {
            type: Boolean,
            default: true,
        },
        value: {
            type: String,
            default: "",
        },
        inputType: {
            type: String,
            default: "text",
        },
        placeholder: {
            type: String,
            default: "",
        },
        isShowBtn: {
            type: Boolean,
            default: false,
        },
        codeType: {
            type: Number,
            default: 0,
        },
        password: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        btnGetCode,
    },
    data() {
        return {
            model: "",
        }
    },
    mounted() {
        this.model = this.value
    },
    methods: {
        getValue() {
            return this.model
        },
    },
}
</script>

<style lang="scss">
.card-group-cell {
    min-height: 55rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: $app-page-padding $app-page-padding $app-page-padding 0;
    margin-left: $app-page-padding;
    border-bottom: solid 1rpx $uni-bg-color-grey;
    &:last-child {
        // border-bottom: 0;
    }

    .label {
        min-width: 180rpx;
    }
    .input {
        outline: none;
        border: none;
        width: 100%;
        display: flex;
        flex: 1;
        padding: 0;
        font-size: $font-size-36;
        background: #f5f6f7;
    }
    .btn-get-code {
        display: flex;
        flex: 1;
        justify-content: flex-end;
    }
    .login-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: $app-page-padding;
    }
}
</style>
